import React, { FC, useCallback } from 'react';
import { Layout } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons';
import classNames from 'classnames';
import { useRecoilState } from 'recoil';
import { collapsedSelector } from '@/recoil/selectors/collapsedSelector';

import './index.scss';

const { Header } = Layout;

const HeaderDefault: FC = () => {
  const [collapsed, setCollapsed] = useRecoilState(collapsedSelector);
  const toggle = useCallback(() => {
    setCollapsed(!collapsed);
    // 切换侧边栏隐藏显示时触发浏览器的 resize 事件，从而触发图表重新渲染
    window.dispatchEvent(new Event('resize'));
  }, [collapsed]);

  return (
    <Header
      className={classNames('site-layout-background', collapsed ? 'pdleft' : '')}
      style={{
        position: 'fixed',
        zIndex: 1000,
        width: '100%',
        paddingLeft: 200,
        transition: 'all .3s'
      }}>
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: toggle,
      })}
    </Header>
  );
};

export default HeaderDefault;
